<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 14:22:41
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:09:10
 * @FilePath: \kgantt\core\components\tasklist\TableListTable.vue
 * @Description: table
-->
<template>
  <div
    class="kgantt-taskListWrapper"
    :style="'font-family:' + fontFamily + ';font-size:' + fontSize"
  >
    <div
      v-for="item in tasks"
      :key="`${item.id}row`"
      class="kgantt-taskListTableRow"
      :style="'height:' + rowHeight + 'px'"
    >
      <div
        v-for="area in resourceArea"
        :key="`area${area.fieldId}`"
        class="kgantt-taskListCell"
        :style="'min-width:' + rowWidth + 'px;max-width:' + rowWidth + 'px'"
        :title="`${area.fieldId}`"
      >
        <div class="kgantt-taskListNameWrapper">
          <div
            v-if="area.expand"
            :class="
              expanderSymbol(item)
                ? 'taskListExpander'
                : 'taskListEmptyExpander'
            "
            @click="() => onExpanderClick(item)"
          >
            {{ expanderSymbol(item) }}
          </div>
        </div>
        <input
          v-if="area.type"
          :type="area.type == AreaMode.Date ? 'date' : 'input'"
          class="kgantt-measureDate"
          style="width: 65%"
          :value="
            area.type == AreaMode.Date
              ? dateToDateString(item[area.fieldId])
              : item[area.fieldId]
          "
          @change="(e) => change(e, item, area.type, area.fieldId)"
          @blur="() => blur(item)"
        />
        <p v-else>{{ item[area.fieldId] }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import { ResourceArea, Task, AreaMode } from "../../types/publicTypes";
import { dateToDateString } from "../../helpers/dateHelper";
defineProps({
  rowHeight: {
    type: Number,
    default: 0,
  },
  rowWidth: {
    type: Number,
    default: 0,
  },
  fontFamily: {
    type: String,
    default: "",
  },
  fontSize: {
    type: String,
    default: "",
  },
  locale: {
    type: String,
    default: "",
  },
  tasks: {
    type: Array as PropType<Task[]>,
    default: () => [],
  },
  selectedTaskId: {
    type: String,
    default: "",
  },
  resourceArea: {
    type: Array as PropType<ResourceArea[]>,
    default: () => [],
  },
});
const emits = defineEmits([
  "onExpanderClick",
  "setSelectedTask",
  "onTaskChange",
]);
const expanderSymbol = (item: Task) => {
  if (item.hideChildren === false) {
    return "▼";
  } else if (item.hideChildren === true) {
    return "▶";
  }
  return "";
};
const onExpanderClick = (task: Task) => {
  emits("onExpanderClick", task);
};
const blur = (task: Task) => {
  emits("onTaskChange", task);
};
const change = (event: Event, item: Task, mode: AreaMode | undefined, fieldId: string) => {
  if(mode === AreaMode.Date) {
    item[fieldId] = new Date((event.target as HTMLInputElement).value);
  } else {
    item[fieldId] = (event.target as HTMLInputElement).value;
  }
};
</script>